import { Component, PropsWithChildren } from 'react'
import { View, Text, Input, Image, Button } from '@tarojs/components'
import { AtIcon } from "taro-ui"
import { AtTabs, AtTabsPane } from 'taro-ui'
import home1 from '../../picture/home1.png'
import home2 from '../../picture/home2.png'
import home3 from '../../picture/home3.png'
import { getBuyHouse } from '../../api/home'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  state: any
  constructor(props) {
    super(props)
    this.state = {
      current: 4,
      keyword: '',
      houseList: []
    }

  }
  componentWillMount() { }

  componentDidMount() {
    this.getbuyHouse()
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  getbuyHouse() {
    getBuyHouse().then((res) => {
      this.setState({
        houseList: res.data.data
      })
    })
  }
  onClick() {
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }
  handleClick(index: number) {
    console.log(index);
    if (index === 0) {
      Taro.navigateTo({
        url: '/pages/Region/index'
      })
    } else if (index === 1) {
      Taro.navigateTo({
        url: '/pages/Price/index'
      })
    } else if (index === 2) {
      Taro.navigateTo({
        url: '/pages/HouseType/index'
      })
    } else if (index === 3) {
      Taro.navigateTo({
        url: '/pages/Filter/index'
      })
    } else {

    }
  }
  onSearch(e) {
    const keyword = e.target.value
    this.setState({
      keyword
    })

    Taro.request({
      url: 'http://localhost:3000/api/search1',
      data: { keyword }
    }).then(res => {
      this.setState({
        houseList: res.data.data
      })
    })
  }
  goAddress() {
    Taro.navigateTo({
      url: '/pages/Region/index'
    })
  }
  goMap() {
    Taro.navigateTo({
      url: '/pages/SearchHouse/index'
    })
  }
  render() {
    const tabList = [{ title: '区域 ▼' }, { title: '价格 ▼' }, { title: '户型 ▼' }, { title: '筛选 ▼' }, { title: '↿⇂' }]
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
            <Text className='tit'>买房</Text>
          </View>
        </View>
        <View className='contains'>
          <View className='address'>
            <View onClick={this.goAddress.bind(this)}>北京 ▼</View>
            <Input placeholder='请在这里输入区域/商圈' value={this.state.keyword} onInput={this.onSearch.bind(this)} />
            <AtIcon className='search' value='search' size='20' color='#ccc'></AtIcon>
            <View onClick={this.goMap.bind(this)}>地图找房</View>
          </View>
          <View className='gong'>
            <View className='tag'>
              <Image src={home1} />
              <View className='title'>找商铺</View>
            </View>
            <View className='tag'>
              <Image src={home2} />
              <View className='title'>找写字楼</View>
            </View>
            <View className='tag'>
              <Image src={home3} />
              <View className='title'>找小区</View>
            </View>
          </View>
          <View className='sort'>
            <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
              <AtTabsPane current={0} index={0}>
              </AtTabsPane>
              <AtTabsPane current={1} index={1}>
              </AtTabsPane>
              <AtTabsPane current={2} index={2}>
              </AtTabsPane>
              <AtTabsPane current={3} index={3}>
              </AtTabsPane>
            </AtTabs>
          </View>
          {
            this.state.houseList?.map((item: any, index: number) => {
              return <View className='goodList' key={index}>
                <Image src={item.imgUrl} />
                <View className='mes'>
                  <View className='tit'>{item.title}</View>
                  <View>{item.address}</View>
                  <View className='mian'>{item.price1}
                    <Text>{item.price2}</Text>
                  </View>
                  <View className='area'>{item.area}</View>
                </View>
              </View>
            })
          }
          <Button className='btn1'>
            <AtIcon value='home' size='20' color='#000'></AtIcon>
            首页</Button>
          <Button className='btn2'>
            <AtIcon value='equalizer' size='20' color='#000'></AtIcon>
            排序</Button>
        </View>
      </View >
    )
  }
}

// https://img1.baidu.com/it/u=1342130754,306943470&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img0.baidu.com/it/u=3295534422,3155222370&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img1.baidu.com/it/u=2064254833,770634332&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500
// https://img1.baidu.com/it/u=1144874046,3925078084&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375
// https://img2.baidu.com/it/u=3849720705,1881524056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img0.baidu.com/it/u=1649151030,2162866999&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img1.baidu.com/it/u=1993417918,2447354163&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=394